*{margin: 0; padding: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
html{background-color: #0B8457;}
body{font-family: "Microsoft YaHei"; font-size: 14px; line-height: 1.42857143; color: #333; height: 100vh;}
img{vertical-align: middle;}
a{color: #92badd; display:inline-block; text-decoration: none; font-weight: 400;}




.logo-box{
	display: flex; align-items: center; flex-direction: column; justify-content: center; width: 100%; position: absolute;
	z-index: -1; top: 100px;
}
h2{
  	text-align: center; font-size: 18px; font-weight: bold; text-transform: uppercase; display: inline-block;
  	margin: 40px 8px 10px 8px; color: #cccccc;
}
.wrapper{
  	display: flex; align-items: center; flex-direction: column; justify-content: center; width: 100%; min-height: 100%;
  	padding: 20px;
}
#formContent{
  	-webkit-border-radius: 10px 10px 10px 10px; border-radius: 10px 10px 10px 10px; background: #fff; padding: 30px;
  	width: 90%; max-width: 480px; position: relative; padding: 0px; -webkit-box-shadow: 0 30px 60px 0 rgba(0,0,0,0.3);
  	box-shadow: 0 30px 60px 0 rgba(0,0,0,0.3); text-align: center;
}
h2.inactive{color: #404040;}
h2.active{color: #0d0d0d; border-bottom: 2px solid #0B8457;}


/* 表格排版 */
input[type=button], input[type=submit], input[type=reset]{
  	background-color: #0B8457; border: none; color: white; padding: 15px 80px; text-align: center; text-decoration: none;
  	display: inline-block; text-transform: uppercase; font-size: 13px; -webkit-box-shadow: 0 10px 30px 0 rgba(95,186,233,0.4);
  	box-shadow: 0 10px 30px 0 rgba(95,186,233,0.4); -webkit-border-radius: 5px 5px 5px 5px; border-radius: 5px 5px 5px 5px;
  	margin: 20px 20px 40px 20px; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out;
  	-ms-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out;
}
input[type=button]:hover, input[type=submit]:hover, input[type=reset]:hover{background-color: #48AC6E;}
input[type=button]:active, input[type=submit]:active, input[type=reset]:active{
  	-moz-transform: scale(0.95); -webkit-transform: scale(0.95); -o-transform: scale(0.95); -ms-transform: scale(0.95);
  	transform: scale(0.95);
}
input[type=text]{
  	background-color: #f6f6f6; border: none; color: #0d0d0d; padding: 15px 32px; text-align: center; text-decoration: none;
  	display: inline-block; font-size: 16px; margin: 5px; width: 90%; border: 2px solid #f6f6f6; border-radius: 5px 5px 5px 5px;
  	-webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out;
  	-o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; -webkit-border-radius: 5px 5px 5px 5px;
}
input[type=text]:focus{background-color: #fff; border-bottom: 2px solid #0B8457;}
input[type=text]:placeholder{color: #cccccc;}
input[type=password]{
    background-color: #f6f6f6; border: none; color: #0d0d0d; padding: 15px 32px; text-align: center; text-decoration: none;
    display: inline-block; font-size: 16px; margin: 5px; width: 90%; border: 2px solid #f6f6f6; border-radius: 5px 5px 5px 5px;
    -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; -webkit-border-radius: 5px 5px 5px 5px;
}
input[type=password]:focus{background-color: #fff; border-bottom: 2px solid #0B8457;}
input[type=password]:placeholder{color: #cccccc;}


/* CSS3淡入淡出动画 */
.fadeInDown{
  	-webkit-animation-name: fadeInDown; animation-name: fadeInDown; -webkit-animation-duration: 1s; animation-duration: 1s;
  	-webkit-animation-fill-mode: both; animation-fill-mode: both;
}
@-webkit-keyframes fadeInDown{
  	0%{opacity: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0);}
  	100%{opacity: 1; -webkit-transform: none; transform: none;}
}
@keyframes fadeInDown{
  	0%{opacity: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0);}
  	100%{opacity: 1; -webkit-transform: none; transform: none;}
}

/* CSS3淡入动画 */
@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }

.fadeIn{
  	opacity:0; -webkit-animation:fadeIn ease-in 1; -moz-animation:fadeIn ease-in 1; animation:fadeIn ease-in 1;
  	-webkit-animation-fill-mode:forwards; -moz-animation-fill-mode:forwards; animation-fill-mode:forwards;
  	-webkit-animation-duration:1s; -moz-animation-duration:1s; animation-duration:1s;
}
.fadeIn.first{-webkit-animation-delay: 0.4s; -moz-animation-delay: 0.4s; animation-delay: 0.4s;}
.fadeIn.second{-webkit-animation-delay: 0.6s; -moz-animation-delay: 0.6s; animation-delay: 0.6s;}
.fadeIn.third{-webkit-animation-delay: 0.8s; -moz-animation-delay: 0.8s; animation-delay: 0.8s;}
.fadeIn.fourth{-webkit-animation-delay: 1s; -moz-animation-delay: 1s; animation-delay: 1s;}
.fadeIn.code{-webkit-animation-delay: 1s; -moz-animation-delay: 1s; animation-delay: 1s;}
.fadeIn.img{-webkit-animation-delay: 1.2s; -moz-animation-delay: 1.2s; animation-delay: 1.2s;}

/* CSS3淡入动画 */
.underlineHover:after{
  	display: block; left: 0; bottom: -10px; width: 0; height: 2px; background-color: #56baed; content: "";
  	transition: width 0.2s;
}
.underlineHover:hover{color: #0d0d0d;}
.underlineHover:hover:after{width: 100%;}

/* 其他 */
*:focus{outline: none;}
#icon{width:60%;}